import React, { Component } from 'react';
import { Icon, Button, Input } from 'antd';
import Citys from '../../config/citys';
import _ from 'lodash';
import './style.scss';

export default class AddCity extends Component<any, any> {
    readonly state = {
        value: '',
        cityList: [],
        none: false,
    }
    private onChange(event: any) {
        const value = event.target.value;
        this.setState({
            value
        })
        if (value) {
            const cityList = _.filter(Citys, (item: any) => {
                return item.ReadmeName.indexOf(value) > -1 || value.indexOf(item.ReadmeName) > -1;
            })
            console.log(cityList)
            this.setState({
                cityList,
                none: cityList.length === 0,
            })
        } else {
            this.setState({
                cityList: [],
                none: false
            })
        }
    }
    private goBack() {
        this.setState({
            value: '',
            cityList: [],
            none: false
        })
        this.props.history.goBack();
    }
    private goCityList(data: any) {
        let cityList = JSON.parse(localStorage.getItem('CITY_LIST') || '[]');
        cityList = _.concat(cityList, data);
        cityList = _.uniqBy(cityList, 'id');
        localStorage.setItem('CITY_LIST', JSON.stringify(cityList))
        this.setState({
            value: '',
            cityList: [],
            none: false
        })
        this.props.history.push('/cityList');
    }
    render() {
        return (
            <div className="addCity-page" style={{ backgroundImage: "url(../images/bg2.jpg)" }}>
                <header className="flex">
                    <Icon type="left" onClick={this.goBack.bind(this)} />
                    <Input value={this.state.value} className="input" placeholder="请输入城市名称" size="small" allowClear onChange={this.onChange.bind(this)} />
                    <Button size="small" ghost onClick={this.goBack.bind(this)}>取消</Button>
                </header>
                <div className="container">
                    <ul>
                        {
                            this.state.cityList.map((item: any, index: number) => (
                                <li key={index} onClick={this.goCityList.bind(this, item)}>{item.ReadmeName}</li>
                            ))
                        }
                    </ul>
                    {this.state.none && <p>未找到结果</p>}
                </div>
            </div>
        )
    }
}
